<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@include file="/common/common.jsp" %>
    <link rel="stylesheet" href="${basePath}/css/layerPage.css${VERSION}"/>
</head>
<body>
<form id="form" name="form" class="form-horizontal" method="post" >
    <div class="panel-body">
        <div class="form-group">
            <label class="col-sm-3 control-label">用户：</label>
            <div class="col-sm-9">
                <input id="userName" class="col-sm-5" type="text" name="userName" value="${userName}" placeholder="选择用户" readonly/>
                <button id="chooseUserBtn" type="button" class="btn btn-danger">选择用户</button>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">角色：</label>
            <div class="col-sm-9">
                <input id="roleName" class="col-sm-5" type="text" name="roleName" value="${roleName}" placeholder="选择角色" readonly/>
                <input id="roleId" type="hidden" name="roleId" />
                <button type="button" id="chooseRoleBtn" class="btn btn-danger">选择角色</button>
            </div>
        </div>

        <input id="id" type="hidden" value="${id}" name="id">
        <button id="submit" type="submit" class="btn btn-primary btn-submit">提交</button>
    </div>
</form>
<script src="${basePath}/js/common/jquery.validator.addmethod.js${VERSION}"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var $form = $("#form");
        var $submit = $("#submit");

        $form.validate({
            errorClass: 'error-msg',
            rules: {
                id:{
                    required:true,
                },
                roleId: {
                    required: true,
                },
            },
            messages: {
                id:{
                    required:"主键不能为空",
                },
                roleId: {
                    required: "角色不能为空",
                },
            },
            submitHandler: function () {
                $.ajax({
                    url: "${basePath}/mroleUser/updateUserRole",
                    type: $form.attr("method"),
                    data: $form.serialize(),
                    dataType: "json",
                    cache: false,
                    beforeSend: function () {
                        $submit.prop("disabled", true);
                    },
                    success: function (data) {
                        if (data.status == '0') {
                            $submit.prop("disabled", false);
                            layer.confirm('操作成功！是否关闭窗口？', {icon: 1}, function (index) {
                                parent.$("#grid-table").jqGrid().trigger("reloadGrid", [{page: 1}]);
                                parent.layer.close(parent.pageii);
                                return false
                            });
                        } else {
                            $submit.prop("disabled", false);
                            layer.alert(data.message, {
                                icon: 0,
                                skin: 'layui-layer-lan',
                                closeBtn: 0
                            });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $submit.prop("disabled", false);
                        layer.alert("系统未知错误", {
                            icon: 0,
                            skin: 'layui-layer-lan',
                            closeBtn: 0
                        });
                    }
                });
            }
        });

        $('#chooseRoleBtn').click("click", function () {
            openRole();
        });

        //选择角色
        function openRole(){
            var pageii = layer.open({
                title: false,
                type: 2,
                area: ["90%", "80%"],
                content: ['${basePath}/mroleUser/toSelectRoles'],
                btn: ["确认", "关闭"],
                yes: function (index, layero) {
                    var roleName = $(layero).find("iframe")[0].contentWindow.roleName;
                    var roleId = $(layero).find("iframe")[0].contentWindow.roleId;
                    layer.close(index);
                    $("#roleName").val(roleName);
                    $("#roleId").val(roleId);
                }, cancel: function () {
                    return true;
                }
            });
        }

    });
</script>
</body>
</html>
